<template>
	<view v-if="pageShow">
		<u-sticky  bgColor="#fff" customNavHeight="0">
			<u-tabs :list="list1" lineWidth="15" lineColor="#42b155" :scrollable="false" :activeStyle="{
		        color: '#42b155',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" @change="tabclick"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" @click="jumpurl('/pages/dingdan/orderDetail?id=',item.id)" v-for="item in list.data" :key="item.id">
				<view class="flexbetween pdl">
					<view class="titletext bold hei_text">{{item.order_no}}</view>
					<view class="xiaohuang" v-show="item.status==10">待接单</view>
					<view class="xiaolan" v-show="item.status==20">司机已接单</view>
					<view class="xiaolan" v-show="item.status==30">进行中</view>
					<view class="xiaohong" v-show="item.status==40">待支付</view>
					<view class="xiaolv" v-show="item.status==50">已完成</view>
					<view class="xiaolv" v-show="item.status==60">已取消</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<u-icon name="map-fill" size="16" color="#ffa126"></u-icon>
						<view class="xiankuan margin_left1 xiaohui">{{item.start_address}}
						</view>
					</view>
					<u-icon name="arrow-right" size="12" color="#999"></u-icon>
				</view>
				<view class="flexleft margin_top">
					<u-icon name="map-fill" size="16" color="#42b155"></u-icon>
					<view class="margin_left1 xiankuan xiaohui" style="width: 480rpx;">{{item.end_address}}</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<u-icon name="clock" size="16" color="#999"></u-icon>
						<view class="hei_text main_size margin_left1 bold">{{item.createtime_text}}</view>
					</view>
					<view class="xiaolan">${{item.pay_price}}</view>
				</view>
				<view class="flexleft margin_top" v-if="item.status==40 || item.status==50">
					<u-icon name="hourglass-half-fill" size="16" color="#999"></u-icon>
					<view class="hei_text main_size margin_left1 bold">{{item.sc_text}}</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: "全部订单",
						id: 0,
					},
					{
						name: "进行中",
						id: 10,
					},
					{
						name: "已完成",
						id: 20,
					},
					{
						name: "已取消",
						id: 30,
					}
				],
				tabsId: "0",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow:false
			}
		},
		onShow() {
			this.page = 1
			this.list = {
				data: []
			}
			if (httpRequest.checkIsLogin()) {
				this.init()
			}
		},
		methods: {
			init(isPage, page) { //提现记录
				let _this = this;
				httpRequest.request("/api/order/index", 'GET', {
					page: page || 1,
					limit: _this.limit,
					status:this.tabsId
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
							this.pageShow = true
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			jumpurl(url,id){
				uni.navigateTo({
					url:url+id
				})
			},
			tabclick(item) {
				// console.log(item,999);
				this.tabsId = item.id
				if (httpRequest.checkIsLogin()) {
					this.init()
				}
			},
		}
	}
</script>

<style scoped>
	.dian{
		width: 30rpx;
		height: 30rpx;
		min-width: 30rpx;
		background-color: #42b155;
		border-radius: 50rpx;
	}
</style>
